<template>
  <div class="num">
    <div class="bor">
      <!-- model 表单的数据 -->
      <!-- rules 表单的校验规则 -->
      <!-- ref 用来选择子组件或者其他标签 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- el-from-item 表单项 一行或者一项就是一个表单项 -->
        <!-- prop 校验的字段 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <!-- <el-button @click="addUserList()">添加用户</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { userLogin, addUser } from "../apis";
export default {
  data() {
    return {
      ruleForm: {
        username: "ZY",
        password: "1314",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 登录
    submitForm(formName) {
      // this.$refs[formName] === this.$refs.ruleForm 选中子元素
      // Login是父组件 el-xxx子组件
      // $refs选择子组件 然后调用子组件的函数 以此来节省时间
      // validate 这个函数不是我们写的 是我们借用了表单组件的
      this.$refs[formName].validate(async (valid) => {
        // valid 校验的结果
        if (valid) {
          // 校验通过 可以提交
          let res = await userLogin(this.ruleForm);
          console.log(res);
          if (res && res.code === 200) {
            // 请求成功，保存数据
            this.$store.commit("saveUserInfo", res.list);
            // 跳转到首页
            this.$router.push("/");
          }
        } else {
          // 未通过 报错
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // async addUserList() {
    //   let res = await addUser({
    //     roleid: "99",
    //     username: "yuxiang",
    //     password: "123456",
    //     status: 1,
    //   });
    // },
  },
};
</script>

<style scoped>
.num {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  /* background: red; */
  background-image: url("../assets/bg_xnet.png");
}
.bor {
  width: 400px;
  height: 300px;
  background-image: url("../assets/bg_xav.png");
  background-size: 100% 300px;
  background-repeat: no-repeat;
  position: absolute;
  top: 30%;
  right: 6%;
  padding-right: 64px;
  padding-top: 4%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 11%;
}
</style>
